<template>
  <div class="chart-wrapper">
    <div class="list-container d-flex flex-wrap ai-stretch">
      <div v-for="(item, index) in dataList" :key="index" class="list-item">
        <i :class="['item-icon', item.icon]"></i>
        <div class="item-content">
          <span class="item-value">{{ item.value }}</span>
          <span class="item-name">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { randomNum } from '@/utils'
export default {
  data() {
    return {
      dataList: [
        {
          name: '网格巡查员平均工作时长',
          icon: '',
          key: 0,
        },
        {
          name: '网格巡查员平均登录次数',
          icon: '',
          key: 0,
        },
        {
          name: '社区平均处置及时率',
          icon: '',
          key: 0,
        },
        {
          name: '社区平均发现率',
          icon: '',
          key: 0,
        },
        {
          name: '社区平均整改率',
          icon: '',
          key: 0,
        },
        {
          name: '社区平均超期率',
          icon: '',
          key: 0,
        },
        {
          name: '到期未整改平均数',
          icon: '',
          key: 0,
        },
      ]
    }
  },
  components: {},
  mounted() {
    const produceNum = () => {
      const numberList = randomNum({ max: 100 }, 7, 2)
      this.dataList = this.dataList.map((d, i) => {
        d.value = numberList[i]
        return d
      })
    }
    produceNum.call(this)
    let interval = setInterval(() => {
      produceNum.call(this)
    }, 2000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(interval)
    })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.list-item{
  width: 50%;
  height: 4.1046rem;
  display: flex;
  align-items: center;
  .item-icon{
    width: 2.4545rem;
    height: 2.4545rem;
    margin-right: 1rem;
    background: #6FEBF1;
  }
  .item-content{
    display: flex;
    flex-direction: column;
  }
  .item-value{
    font-size: 1.6364rem;
    line-height: 1;
    margin-bottom: 0.5681rem;
    color: #FFFFFF;
  }
  .item-name{
    color: #6FEBF1;
    font-size: 0.8636rem;
    line-height: 1;
  }
}
</style>
